<template>
  <div class="comment">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>评论管理</el-breadcrumb-item>
      <el-breadcrumb-item>所有评论</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 白板 -->
    <el-card class="blog-box">
      <el-table
        :data="comments"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="编号"
        >
        </el-table-column>
        <el-table-column
          prop="blog.title"
          label="博客标题"
        >
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="昵称">
        </el-table-column>
        <el-table-column
          prop="content"
          label="内容">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="评论时间">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
                type="danger"
                icon="el-icon-delete"
                @click="bdelete(scope.row.id)"
              ></el-button>
          </template>
        </el-table-column>
    </el-table>

        <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.totle"
    >
    </el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      comments:[],
      pageInfo:{
        currentPage:1,
        pageSize:5,
        totle:0,
      },
    };
  },
  methods: {
    async getAllComments(currentPage,pageSize){
      var d=await this.$http.get('comment/'+currentPage+"/"+pageSize);
      this.comments=d.data.comments;
      this.pageInfo=d.data.pageInfo;
    },
    handleSizeChange(size){
      this.getAllComments(this.pageInfo.currentPage,size);
    },
    handleCurrentChange(page){
      this.getAllComments(page,this.pageInfo.pageSize);
    },
    async delCommentById(id){
      var d=await this.$http.delete("comment/"+id);
       if (d.code == 200) {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.getAllComments(this.pageInfo.currentPage,this.pageInfo.pageSize);
      } else {
        this.$message({
          message: "删除失败",
          type: "error",
        });
      }
    },
    bdelete(id) {
      this.$confirm("此操作将永久删除该博客, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delCommentById(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted: function () {
    this.getAllComments(this.pageInfo.currentPage,this.pageInfo.pageSize);
  },
};
</script>
<style scoped>
</style>